import {
	CurveAnimation,
	Curves
} from './util'

const {
	windowWidth,
	screenHeight
} = getApp().globalData

const ScaleTransitionRouteBuilder = (customRouteContext) => {
	console.info('skyline: scale page route build')

	const {
		primaryAnimation,
		secondaryAnimation,
		primaryAnimationStatus,
		secondaryAnimationStatus,
		userGestureInProgress,
	} = customRouteContext

	const _curvePrimaryAnimation = CurveAnimation({
		animation: primaryAnimation,
		animationStatus: primaryAnimationStatus,
		curve: Curves.linearToEaseOut,
		reverseCurve: Curves.easeInToLinear,
	})

	/**
	 * 1. 手势拖动时采用原始值
	 * 2. 页面进入时采用 curve 曲线生成的值
	 * 3. 页面返回时采用 reverseCurve 生成的值
	 */
	const handlePrimaryAnimation = () => {
		'worklet'
		let t = primaryAnimation.value
		if (!userGestureInProgress.value) {
			t = _curvePrimaryAnimation.value
		}
		const transX = windowWidth * (1 - t)
		return {
			transform: `translateX(${transX}px)`,
		}
	}

	const _curveSecondaryAnimation = CurveAnimation({
		animation: secondaryAnimation,
		animationStatus: secondaryAnimationStatus,
		curve: Curves.fastOutSlowIn,
	})

	const handleSecondaryAnimation = () => {
		'worklet'
		let t = secondaryAnimation.value
		if (!userGestureInProgress.value) {
			t = _curveSecondaryAnimation.value
		}

		// 页面缩放大小
		const scale = 0.08
		// 距离顶部边距因子
		const topDistance = 0.1
		// 估算的偏移量
		const transY = screenHeight * (topDistance - 0.5 * scale) * t 
		return {
			borderRadius: `${ 12 * t }px`,
			transform: `translateY(${transY}px) scale(${ 1 - scale * t })`,
		}
	}

	return {
		opaque: true,
		handlePrimaryAnimation,
		handleSecondaryAnimation,
		transitionDuration: 300,
		reverseTransitionDuration: 300,
		canTransitionTo: true,
		canTransitionFrom: true,
	}
}

export default ScaleTransitionRouteBuilder